<!--
 * @Author: zhangmengqiong
 * @Date: 2021-05-12 14:18:00
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-05-12 17:20:26
-->
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=DVPI4kwxgMqXDrTx483rHkB7c3KDRyPp"
    ></script>
    <title>百度地图</title>
    <style type="text/css">
      html {
        width: 100%;
        height: 100%;
      }
      body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #container {
        width: 90%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script type="text/javascript">
      // 3.0 创建地图实例时，通过opts方式设置地图允许的最大最小级别
      var map = new BMapGL.Map('container');
      // 创建地图实例
      var point = new BMapGL.Point(118.121156, 24.474621);
      // 创建点坐标
      map.centerAndZoom(point, 15);
      // 通过滚轮进行放大缩小
      // map.enableScrollWheelZoom(true);
      // 定义icon对象  Icon(url: String, size: Size , opts: IconOptions )
      // 更改地图样式
      map.setMapStyleV2({
        styleId: '5ec6d67c6f18b41d123361713351745d',
      });
      var myIcon = new BMapGL.Icon(
        'https://www.youbaobao.xyz/datav-res/datav/location.png',
        new BMapGL.Size(60, 60),
        {
          anchor: new BMapGL.Size(0, 0), // 改位移
        }
      );
      // 定义地图标注
      var marker = new BMapGL.Marker(point, { icon: myIcon });

      marker.addEventListener('click', () => {
        getInfoWindow();
      });
      map.addOverlay(marker);

      // 绘制线条 Polyline(points: Array< Point >, opts: PolylineOptions )
      var polyline = new BMapGL.Polyline(
        [new BMapGL.Point(118.121156, 24.474621), new BMapGL.Point(118.89, 25)],
        {
          strokeColor: 'red', // 线的颜色
          strokeWeight: 5, // 线条宽度
          strokeOpacity: 0.5, // 透明度
        }
      );
      map.addOverlay(polyline);

      // 绘制三角形  Polygon(points: Array< Point >, opts: PolygonOptions )
      var polygon = new BMapGL.Polygon(
        [
          new BMapGL.Point(118.121156, 24.474621),
          new BMapGL.Point(119.34, 24.57),
          new BMapGL.Point(119.45, 24.67),
        ],
        {
          strokeColor: 'red', // 线的颜色
          strokeWeight: 2, // 线条宽度
          fillColor: 'blue', // 填充色
        }
      );
      map.addOverlay(polygon);

      // 绘制文本  Label(content: String, opts: LabelOptions )
      var label = new BMapGL.Label('你好,地图标注', {
        position: point,
        offset: new BMapGL.Size(60, 60),
      });
      label.setStyle({
        width: '100px',
        height: '30px',
        padding: '20px',
        color: '#333',
        strokeColor: 'red', // 线的颜色
        strokeWeight: 2, // 线条宽度
        fillColor: 'blue', // 填充色
      });
      // 文本事件
      label.addEventListener('click', () => {
        console.log('打印'); // 打印
      });
      map.addOverlay(label);

      // 绘制弹窗  InfoWindow(content: String, opts: LabelOptions )
      function getInfoWindow() {
        var content = '<div style="color:red;">123444</div>';
        content += '<div style="color:yellow;">你好,点击地图标注弹窗</div>';
        var infoWindow = new BMapGL.InfoWindow(content, {
          width: '100px',
          height: '30px',
          title: '提示',
        });
        map.openInfoWindow(infoWindow, point);
      }
    </script>
  </body>
</html>
